<template>
  <div class="home">
    <el-container style=" border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-row class="tac">
          <h2>信息管理</h2>
          <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
            <el-menu-item index="1" @click="show = 'image'">
              <span slot="title">图片管理</span>
            </el-menu-item>
            <el-menu-item index="2" @click="show = 'line'">
              <span slot="title">物流路线管理</span>
            </el-menu-item>
            <el-menu-item index="3" @click="show = 'user'">
              <span slot="title">用户管理</span>
            </el-menu-item>
          </el-menu>
        </el-row>
      </el-aside>
      <el-container>
        <el-header style="text-align: right;">
          <span>{{ this.user }}</span>
        </el-header>
        <el-main>
          <ImageList v-if="show == 'image'" />
          <UserList v-else-if="show == 'user'" />
          <LogticsLine v-if="show == 'line'" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
 
<script>
import ImageList from './ImageList.vue';
import UserList from './UserList.vue';
import LogticsLine from './logticsLine.vue';
import myaxios from '../components/axios';
export default {
  data() {
    return {
      show: 'image',
      user: localStorage.getItem('account'),
      token: localStorage.getItem("token")
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    async getToken() {
      myaxios.get("/getToken", { params: { token: this.token } })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: 'token验证成功！',
              type: 'success'
            })
          } else {
            this.$router.push("/");
          }
        })
    }
  },
  mounted() {
    this.getToken();
  },
  components: { ImageList, UserList, LogticsLine }
}
</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
